import React from 'react';

import {
  Text,
  View,
  Image,
  Animated,
} from 'react-native';
import styles from './styles';

export default class listItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slideAnim: new Animated.Value(100),
    }
  }

  componentDidMount() {
    Animated.timing(this.state.slideAnim, {
      toValue: 0,
      duration: 500,
      delay: this.props.delay,
    }).start();
  }

  render() {
    return (
      <Animated.View style={{margin:10, marginLeft: this.state.slideAnim, flexDirection: 'row', alignItems:'center'}}>
        <Image source={{uri: this.props.row.Poster}} style={styles.poster} />
        <View style={{flex: 1}}>
          <Text style={styles.title}>{this.props.row.Title}</Text>
          <Text style={styles.subHeading}>{this.props.row.Type}-{this.props.row.Year}</Text>
        </View>
      </Animated.View>
    );
  }
}
